<template>
  <div class="login_wrap">
      <div class="form_wrap">
        <h2 class="title">Login</h2>
          <el-form
              ref="formRef"
              :model="loginData"
              label-width="100px"
              class="demo-dynamic"
          >
              <el-form-item
                  prop="username"
                  label="用户名"
                  :rules="[
                      {
                      required: true,
                      message: '此项为必填项',
                      trigger: 'blur',
                      }, 
                  ]"
              >
                  <el-input v-model="loginData.username" required="required"/>
              </el-form-item>
              
              <el-form-item
                  prop="password"
                  label="密码"
                  :rules="[
                  {
                  required: true,
                  message: '此项为必填项',
                  trigger: 'blur',
                  }, 
              ]"
              >
                  <el-input type="password" v-model="loginData.password" required="required"/>
              </el-form-item>
            <div class="forget-div">
              <a href="#" class="forget">ForgotYourPassword?</a>
            </div>
          </el-form>

          <div class="login-button">
            <el-button type="success" class="login_btn" @click="login">Login</el-button>
            <el-button type="danger" class="login_btn" @click="register" >Register</el-button>
          </div>
      </div>
  </div>
</template>  



<script>
import {reactive, toRefs,ref} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
import {useModelWrapper} from '../../components/use-model-wrapper.js'
import { useStore } from 'vuex'
import {inject} from "vue";

  export default{
    name: "StoreLogin",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      editData: {
        type: Object,
      },
    },
    setup(props, {emit}){
      const reload = inject("reload");
      const ProductListVisible = useModelWrapper(props, emit, 'visible')
      const {editData,visible} = toRefs(props)
      // 实例化路由对象
      const routers = useRouter()
      const store = useStore()
      const data = reactive({
      loginData:{
        username:'',
        password:''
      },
      userinfo: ref([]),
      loading: null
    })


    const login = async() =>{
        data.loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        await axios.post(
        '/api/login/',
        data.loginData,
        {
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            'X-Requested-With': 'XMLHttpRequest',
            'Access-Control-Allow-Origin': '*'
          }
        }
        ).then(res => {
          data.userinfo = res.data
          if (res.data.userinfo){
            localStorage.setItem('loginData',JSON.stringify(data.loginData))
            data.loading.close()
            routers.push({
              path: '/index'
            })
            return
          }
          data.loading.close()
          ElMessage({
            message: '账号密码错误！',
            type: 'error',
            duration: 2000,
            center: true,
          })
      })
      .catch(error => {
        console.log('error:', error);
      })
    }


    const  register= async() =>{
      routers.push({
              path: '/register'
            })

    }




    return {
        ...toRefs(data),
        login,
        register,
        ProductListVisible,
        editData,
        visible
        
      }
    }
  }

</script>




<style  scoped>
  .login_wrap{
      width: 100%;
      height: 100%;
      position: relative;
  }
  .form_wrap{
      position: fixed;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: #ffffff;
      padding:30px 50px;
      border-radius: 5px;
      box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  }
  .login_btn{
      display: block;
      margin: 10px auto;
  }
  .login-button {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin-left: 100px;
    margin-top: 20px;
  }

  .title {
    margin-right: 100px;
    margin-bottom: 50px;
  }

  .forget-div {
    height: 10px;
    width: 100%;
    margin-bottom: 10px;
  }

  .forget {
    font-size: 10px;
    color: black;
    position: absolute;
    right: 60px;
    bottom: 100px;
    margin-left: 200px;

  }
</style>